<div class="layuimini-container layuimini-page-anim">
  <div class="layuimini-main">

<!--    <script type="text/html" id="toolbarDemo">-->
<!--      <div class="layui-btn-container">-->
<!--        <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加游戏 </button>-->
<!--      </div>-->
<!--    </script>-->

    <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

    <script type="text/html" id="currentTableBar">
      <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 启动 </button>
    </script>

  </div>
</div>

<script>
  layui.use(['form', 'table','miniPage','element'], function () {
    var $ = layui.jquery,
      form = layui.form,
      table = layui.table,
      miniPage = layui.miniPage;

    table.render({
      id:'playertable',
      elem: '#currentTableId',
      url: 'http://localhost:8081/PlayerManagement_war_exploded/showPlayerServlet',
      toolbar: '#toolbarDemo',
      defaultToolbar: ['filter', 'exports', 'print', {
        title: '提示',
        layEvent: 'LAYTABLE_TIPS',
        icon: 'layui-icon-tips'
      }],
      cols: [[
        {type: "checkbox", width: 50},
        {field: 'id', title: 'ID', sort: true},
        {field: 'name', title: '游戏名称'},
        // {field: 'age', title: '年龄', sort: true},
        // {field: 'tel', title: '电话号码'},
        {field: 'category', title: '游戏分类'},
        {field: 'company', title: '游戏公司'},
        {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
      ]],
      limits: [10, 15, 20, 25, 50, 100],
      limit: 15,
      page: true,
      skin: 'line',
      parseData: function(res) { //res为原始返回的数据，需要将其拆分成分页数据
        var result;
        if (this.page.curr) {//如果不是第1页
          result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
        } else {
          result = res.data.slice(0, this.limit);//获取原始数据1-10条数据
        }
        return {
          "code": res.code, //解析接口状态
          "msg": res.msg, //解析提示文本
          "count": res.count, //解析数据长度
          "data": result //解析数据列表
        }
      }, done: function (res, curr, count) {//表格渲染完成后的回调函数
        bindTableToolbarFunction();//绑定表格自定义按钮的事件，防止表格reload后，自定义按钮事件失效
      }
    });


    // 监听搜索操作
    $('#btn-search').click(function () {//点击搜索按钮
      var inputVal = $('#username').val()//获取学号文本框的值
      var inputVal2 = $('#userid').val()//获取学号文本框的值
      var inputVal3 = $('#teamname').val()//获取学号文本框的值
      table.reload('playertable', {//按搜索条件重新加载表格，值”stuinfo“为table.render中的基础参数id的值
        where: {//设定异步数据接口的额外参数,在servlet可用request.getParameter("下列键")获取值
          username : inputVal,//设置键值对，可有多个
          userid : inputVal2,//设置键值对，可有多个
          teamname : inputVal3//设置键值对，可有多个
        }
        ,page: {
          curr: 1//重新从第 1 页开始
        }
        , done: function (res, curr, count) {//表格渲染完成后的回调函数
          bindTableToolbarFunction();//绑定表格自定义按钮的事件，防止表格reload后，自定义按钮事件失效
        }
      });
    })



    /**
     * toolbar事件监听
     */
    table.on('toolbar(currentTableFilter)', function (obj) {
      if (obj.event === 'add') {   // 监听添加操作
        var content = miniPage.getHrefContent('page/table/add.html');
        var openWH = miniPage.getOpenWidthHeight();

        var index = layer.open({
          title: '添加用户',
          type: 1,
          shade: 0.2,
          maxmin:true,
          shadeClose: true,
          area: [openWH[0] + 'px', openWH[1] + 'px'],
          offset: [openWH[2] + 'px', openWH[3] + 'px'],
          content: content,
        });
        $(window).on("resize", function () {
          layer.full(index);
        });
      } else if (obj.event === 'delete') {  // 监听删除操作
        var checkStatus = table.checkStatus('currentTableId')
          , data = checkStatus.data;
        layer.alert(JSON.stringify(data));
      }
    });

    //监听表格复选框选择
    table.on('checkbox(currentTableFilter)', function (obj) {
      console.log(obj)
    });

    table.on('tool(currentTableFilter)', function (obj) {
      var data = obj.data;
      var id=data.id;
      if (obj.event === 'edit') {
        var content = miniPage.getHrefContent('page/table/edit.jsp?id='+id);
        var openWH = miniPage.getOpenWidthHeight();

        var index = layer.open({
          title: '编辑用户',
          type: 1,
          shade: 0.2,
          maxmin:true,
          shadeClose: true,
          area: [openWH[0] + 'px', openWH[1] + 'px'],
          offset: [openWH[2] + 'px', openWH[3] + 'px'],
          content: content
        });
        $(window).on("resize", function () {
          layer.full(index);
        });
        return false;
      } else if (obj.event === 'delete') {
        layer.confirm('真的删除么', function (index) {
          var id = data.id;
          $.ajax({
            url: 'http://localhost:8081/PlayerManagement_war_exploded/delPlayerServlet',
            dataType: 'text',
            data: {id: id},
            success: function (result) {
              if (result == "ok") {
                obj.del();
                layer.msg('【' + data.name + '】删除成功！')
              }
            }
          });
          layer.close(index);
        });
      }else if (obj.event === 'delete2') {
        layer.confirm('真的删除么emmm', function (index) {
          var id = data.id;
          $.ajax({
            url: 'http://localhost:8081/PlayerManagement_war_exploded/delPlayerServletAll',
            dataType: 'text',
            data: {id: id},
            success: function (result) {
              if (result == "ok") {
                obj.del();
                layer.msg('【' + data.name + '】删除成功！')
              }
            }
          });
          layer.close(index);
        });
      }
    });

  });
</script>
